<template>
  <div>
    <!--    面包屑导航栏-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <img src="../../assets/img/Echarts.png" alt="">
      <!--    设置一个具有宽高的dom-->
      <div id="main"></div>
    </el-card>
  </div>
</template>

<script>
//导入echarts
import *as echarts from 'echarts';
import {request} from "../../network/axios";

export default {
  name: "reports",
  data() {
    return {
      option: {},
    }
  },
  created() {
    this.getReportsData()
  },
  //页面上dom被渲染是mounted
  mounted() {
    this.showEcharts()
  },
  methods: {

    showEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '数据报表'
        },
        tooltip: {},
        legend: {
          data: ['华东', '华南', '华北', '西部', '其他']
        },
        xAxis: {
          data: ["2020-12-27", "2020-12-28", "2020-12-29", "2020-12-30", "2020-12-31", "2021-1-1"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [2999, 3111, 4100, 3565, 3528, 6000],
            name: "华东",
            stack: "总量",
            type: "line",
            areaStyle:{
              normal:{
              }
            }
          },
          {
            data: [5090, 2500, 3400, 6000, 6400, 7800],
            name: "华南",
            stack: "总量",
            type: "line",
            areaStyle:{
              normal:{
              }
            }
          },
          {
            data: [6888, 4000, 8010, 12321, 13928, 12984],
            name: "华北",
            stack: "总量",
            type: "line",
            areaStyle:{
              normal:{
              }
            }
          },
          {
            data: [9991, 4130, 7777, 12903, 13098, 14028],
            name: "西部",
            stack: "总量",
            type: "line",
            areaStyle:{
              normal:{
              }
            }
          },
          {
            data: [15212, 5800, 10241, 14821, 15982, 14091],
            name: "其他",
            stack: "总量",
            type: "line",
            areaStyle:{
              normal:{
              }
            }
          }

        ]

      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    //获取数据
    getReportsData() {
      request({
        url: `reports/type/1`,
      }).then(res => {
        this.option = res.data.data
        console.log(res.data);
      })
    }
  }
}
</script>

<style scoped src="../../assets/css/reports/reports.css">

</style>